import React, { Component } from "react";

// 引入classnames，用于不同条件添加不同的类名
import classNames from "classnames/bind";
import styles from "./03-class.css";

let cx = classNames.bind(styles);

// import "./03-class.css";

const done = true;

/*
  当条件比较简单的时候，可以使用三目来添加不同的样式

  当条件非常复杂的时候，可以使用第三方插件(classnames)来解决问题
  安装 npm i classnames
*/
class App extends Component {
  render() {
    // 参数的对象里面的key表示的是类名，value表示的是表达式
    // 通过value的true和false来表示是否要添加前面的类名
    let className = cx({
      abc: done,
      xxx: 2 > 1,
      font: "1111",
    });

    return (
      <>
        <h2>通过不同的条件添加不同的样式</h2>
        {/* <div className={done ? "font" : "font2"}>hello react!</div> */}
        {/* <div className={done ? "font" : ""}>hello react!</div> */}

        <div className={className}>hello react!</div>
      </>
    );
  }
}

export default App;
